import React, { Component } from 'react'
import { connect  } from 'react-redux'
import { addPerson  } from '../../redux/actions/person'
import { nanoid } from 'nanoid'

class Person extends Component {
  addNewPerson = () =>  {
    const name = this.nameNode.value
    const age = this.ageNode.value
    this.props.addPerson({ id: nanoid(), name, age })
  }
  render() {
    console.log(this.props)
    return (
      <div>
        <h1>我是Person组件</h1>
        <h1>和为：{ this.props.count }</h1> 
        <div>
          <input type="text" ref = { e => this.nameNode = e } placeholder="请输入名字"/>
          <input type="text" ref = { e => this.ageNode = e } placeholder="请输入年龄"/>
          <button onClick={ this.addNewPerson }>添加</button>
        </div>
        {
          this.props.persons.map(el => {
           return (<div key = { el.id }>
              <div>姓名: { el.name }</div>
              <div>年龄：{ el.age  }</div>
            </div>)
          })
        }       
      </div>
    )
  }
}

export default connect(
  state => ({ ...state }),
  {
    addPerson
  }
)(Person)
